/**
 * Created by fandongyang on 2017/7/26.
 */

import {
    StackNavigator,
    TabNavigator,
    addNavigationHelpers
} from 'react-navigation';

import React from 'react';
import { Dimensions} from 'react-native' ;


import CardStackStyleInterpolator from 'react-navigation/src/views/CardStackStyleInterpolator';
import {NavigationComponent} from 'react-native-material-bottom-navigation';
import Icon from 'react-native-vector-icons/MaterialIcons';

import Login from './pages/login/Login';
import Register from './pages/login/Register';

import Button from './components/Button';
//import Icon from 'react-native-vector-icons/Ionicons';

import HomePage from './containers/HomeContainer';
import CommunityPage from './containers/CommunityContainer';
import CenterPage from './containers/CenterContainer';
import UserPage from './containers/UserContainer';

const MainIcon = require('./images/cert.png');
const {width} = Dimensions.get('window')

// 为了实现登录的modal效果,所以将Home页面单独拆分出来.
// 推荐除了Login的页面,其他的都不要写在里面
const HomeStack = StackNavigator({
    Home: {
        screen: HomePage,
        navigationOptions: () => TabOptions('首页', MainIcon, 'home', '首页2'),
    },
    Login: {
        screen: Login,
        /*  navigationOptions: {
         headerTitle: '登录',
         }*/
        navigationOptions: {
            header: null
        }
    }
}, {
    mode: 'modal',
});
// 为了实现登录的modal效果,所以将Community页面单独拆分出来.
const CommunityStack = StackNavigator({
    Community: {
        screen: CommunityPage,
        navigationOptions: () => TabOptions('发布', MainIcon, 'add-circle', '社区2'),
    },
    Login: {
        screen: Login,
        navigationOptions: {
            headerTitle: 'Login',
        }
    }
}, {
    mode: 'modal',
});
//// 为了实现登录的modal效果,所以将Center页面单独拆分出来.
const CenterPageStack = StackNavigator({
    Center: {
        screen: CenterPage,

        navigationOptions: () => TabOptions('', MainIcon, 'import-export', '中心2'),
    },
    Login: {
        screen: Login,
        navigationOptions: ({navigation}) => LoginOptions({navigation})
    }
}, {
    mode: 'modal',
});
//// 为了实现登录的modal效果,所以将User页面单独拆分出来.
const UserStack = StackNavigator({
    User: {
        screen: UserPage,
        navigationOptions: () => TabOptions('我的', MainIcon, 'person', '个人1'),
    },
    Login: {
        screen: Login,
        navigationOptions: ({navigation}) => LoginOptions({navigation})
    }
}, {
    mode: 'modal',
});

const MyTab = TabNavigator({
        HomeStack: {
            screen: HomeStack,
            navigationOptions: {
                header: null
            }
        },
        CommunityStack: {
            screen: CommunityStack,
            navigationOptions: {
                header: null
            }
        },

        /*    CenterPageStack: {
                screen: CenterPageStack,
                navigationOptions: {
                    header: null
                }
            },*/
        UserStack: {
            screen: UserStack,
            navigationOptions: {
                header: null
            }
        },
    },
    {
        // initialRouteName:'MainStack',
        tabBarComponent: NavigationComponent,
        tabBarPosition: 'bottom',
        // tabBarComponent:TabBarBottom,
        swipeEnabled: false,
        animationEnabled: false,

        backBehavior: 'none',
        lazy: iOS ? true : false,
        tabBarOptions: {
            // tabbar上label的style
            labelStyle: {
                marginTop: 0
            },
            // tabbar的Iconstyle
            iconStyle: {
                height: 20,
                width: 20,
                margin: 0
            },
            // tabbar的style
            style: {
                height: 49,
                backgroundColor: 'white'
            },
            // label和icon的背景色 活跃状态下
            activeBackgroundColor: 'white',
            // label和icon的前景色 活跃状态下（选中）
            activeTintColor: '#444444',
            // label和icon的背景色 不活跃状态下
            inactiveBackgroundColor: 'white',
            // label和icon的前景色 不活跃状态下(未选中)
            inactiveTintColor: '#aaa',
            showIcon: true,
            // 是否显示label，默认为true

            // 不透明度为按选项卡(iOS和Android < 5.0)
            pressOpacity: 0.3,

            indicatorStyle: {
                height: 0, // android 中TabBar下面会显示一条线，高度设为 0 后就不显示线了,
            }
        }
    });
export const MyApp = StackNavigator({

    MyTab: {
        screen: MyTab,
        navigationOptions: {
            header: null,
        }
    },
    Register: {
        screen: Register,
        navigationOptions: ({navigation}) => StackOptions({navigation})
    },

}, {
    headerMode: 'screen',
    transitionConfig: () => ({
        screenInterpolator: CardStackStyleInterpolator.forHorizontal,
    })
});

const TabOptions = (tabBarTitle, normalImage, selectedImage, navTitle) => {

    // console.log(navigation);
    const tabBarLabel = tabBarTitle;
    /*    const tabBarIcon = (({tintColor, focused}) => {
     return (
     <Image
     source={!focused ? normalImage : selectedImage}
     style={[{height: 35, width: 35}, {tintColor: tintColor}]}
     />
     )
     });*/
    const tabBarIcon = (({tintColor, focused}) => {
        /*   while (tabBarTitle === '发布') {
               return (
                   <View style={{width: width / 3, borderWidth: 1}}>
                       <TouchableOpacity onPress={() => Alert.alert(
                           '标题',
                           '提示信息内容',
                           [
                               {text: '稍后询问', onPress: () => console.log('Ask me later pressed')},
                               {text: '取消', onPress: () => console.log('Cancel Pressed'), style: 'cancel'},
                               {text: '确定', onPress: () => console.log('OK Pressed')},
                           ],
                           {cancelable: false}
                       )}>
                           <View style={{backgroundColor: 'red', width: 24, height: 24, borderRadius: 50}}/>
                       </TouchableOpacity>
                   </View>
               )
           }*/
        return (
            <Icon size={24} name={selectedImage}/>
        )
    });
    const headerTitle = navTitle;
    const headerTitleStyle = {
        fontSize: iOS ? FONT_SIZE(20) : FONT_SIZE(23),
        color: 'white',
        alignSelf: 'center',
        paddingTop: Android ? 17 : null,
    };
    // header的style
    const headerStyle = {backgroundColor: '#444444'};
    const tabBarVisible = true;
    const header = null
    // ;
    return {tabBarLabel, tabBarIcon, headerTitle, headerTitleStyle, headerStyle, tabBarVisible, header};
};

const StackOptions = ({navigation}) => {
    // console.log(navigation);
    let {state, goBack} = navigation;
    // if (!state.params.isVisible){
    //     return;
    // }
    // alert(state.routeName)
    const headerStyle = {backgroundColor: '#444444'};

    const headerTitle = state.params ? state.params.title : state.routeName;

    const headerTitleStyle = {
        fontSize: iOS ? FONT_SIZE(20) : FONT_SIZE(23),
        color: 'white', fontWeight: '500', alignSelf: 'center', paddingTop: Android ? 17 : null,
    }
    const headerBackTitle = false;
    const headerLeft = (
        <Button
            isCustom={true}
            customView={
                <Icon
                    name='keyboard-arrow-left'
                    size={30}
                    color='white'
                    style={{marginLeft: 12, paddingTop: Android ? 17 : null}}
                />
            }
            onPress={() => {
                goBack()
            }}
        />
    );
    let headerRight;
    if (state.params ? state.params.headerRight : null) {
        headerRight = state.params.headerRight;
    }
    let header;
    if (state.params ? state.params.isVisible === true : null) {
        header = null;
    }
    return {headerStyle, headerTitle, headerTitleStyle, headerBackTitle, header, headerLeft, headerRight}
};

const LoginOptions = ({navigation}) => {
    let {state, goBack} = navigation;
    const headerStyle = {backgroundColor: '#444444'};
    const headerTitle = '登录';
    const headerTitleStyle = {
        fontSize: iOS ? FONT_SIZE(20) : FONT_SIZE(23), color: 'white',
        fontWeight: '500', paddingTop: Android ? 17 : null, alignSelf: 'center'
    }
    const headerBackTitle = false;
    const headerLeft = (
        <Button
            isCustom={true}
            customView={
                <Icon
                    name='keyboard-arrow-left'
                    size={30}
                    color='white'
                    style={{marginLeft: 13, paddingTop: Android ? 17 : null}}
                />
            }
            onPress={() => {
                goBack()
            }}
        />
    );
    let headerRight;
    if (state.params.headerRight) {
        headerRight = state.params.headerRight;
    }
    let header;
    if (state.params.isVisible === true) {
        header = null;
    }
    const gesturesEnabled = false;
    return {
        headerStyle,
        headerTitle,
        headerTitleStyle,
        headerBackTitle,
        headerLeft,
        header,
        headerRight,
        gesturesEnabled
    }
};


const MainApp = () =>
    <MyApp/>
;

const AppWithNavigationState = ({dispatch, nav}) => (
    <MainApp navigation={addNavigationHelpers({dispatch, state: nav})}/>
);


export default AppWithNavigationState;
